<template>
	<view class="main">
		<view class="card">
			<view class="topCard">
				<view class="item">
					<text>{{listData[0].patients_name}}</text>
					<text class="tag">{{listData[0].relationship}}</text>
				</view>
				<!-- <view class="btn" @click="open('bottom')">
					<image src="/static/images/切换.png"></image>
				</view> -->
			</view>
			<view class="bottomCard">
				<text class="idCard">{{listData[0].patients_id_number}}</text>
				<!-- <text class="personItem2">切换就诊人</text> -->
			</view>
		</view>
		<view class="card2">
			<view class="card2Item1">选择预约时间</view>
			<view class="card2Item2">
				<riQi></riQi>
			</view>
		</view>
		<view class="card3">
			<view class="card3Item1">套餐详情</view>
			<view class="card3Item2"> 
				<view class="card3Item2-item" v-for="item in arr">
					<view class="card3Item2-title">
						<text>{{item.title}}</text>
					</view>
					<view class="card3Item2-price">
						<text>￥</text>
						<text>{{item.price}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="card4">
			<view>预约须知</view>
			<view class="card4Desc">
				<view>1.套餐内的项目为固定项目，不可增减。</view>
				<view>2.您可以选择一周内的号源，每周三早10点开放下一周号源。</view>
				<view>3、体检当日至我院至门诊楼三楼领取排队号。</view>
				<view>4、预约成功后如须退款，请于我院退费窗口办理。</view>
			</view>
		</view>
		<view class="content3">
			<button class="btn3">合计：<text class="btnText">{{arrData.packagePrice}}</text></button>
			<button class="btn3 btn2" @click="tiaoZhuan">下一步</button>
		</view>
		<view>
			<uni-popup ref="popup" type="bottom" background-color="#fff">
				<view class="tanTitle">选择就诊人</view>
				<view class="tanSection">
					<view class="tanCard">
						<view>
							<view>
								<text>蒋峰</text>
								<text class="tag">本人</text>
							</view>
							<view class="idCard idCard2">6220**********9090</view>
						</view>
						<view class="idCard3"> &gt; </view>
					</view>
					
					<view class="tanCard">
						<view>
							<view>
								<text>范东升</text>
								<text class="tag">父母</text>
							</view>
							<view class="idCard idCard2">6220**********9090</view>
						</view>
						<view class="idCard3"> &gt; </view>
					</view>
				</view>
				
			</uni-popup>
		</view>
	</view>
	
</template>

<script>
	import riQi from '/components/bookingReg/makeselectRiqi/makeselectRiqi.vue'
	import {
		ref,
		toRefs,
		reactive,
		getCurrentInstance
	} from 'vue'
	export default {
		components:{riQi},
		setup(){
			const data=reactive({
				arr:[{
					title:'一般检查',
					price:'100'
				},
				{
					title:'常规检查',
					price:'200'
				},
				{
					title:'血液检查',
					price:'400'
				},
				{
					title:'尿液检查',
					price:'400'
				},
				{
					title:'内科检查',
					price:'1000'
				},
				{
					title:'hpv检查',
					price:'1500'
				}],
				type:'center',
				listData:[],
				arrData:{}
			})
			
			
			data.listData=uni.getStorageSync('listData');
			// console.log(data.listData);
			console.log(uni.getStorageSync('arrData'));
			data.arrData=uni.getStorageSync('arrData');
			const open=(type)=>{
				this.type=type;
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open(type);
			}
			const tiaoZhuan=()=>{
				uni.navigateTo({
					url: '/pages/home/bodyExamine/confirmAppointment/confirmAppointment'
				});
			}
			
			return {...toRefs(data),open,tiaoZhuan}
		}
	}
</script>

<style>
.main{
		padding: 30rpx;
		box-sizing: border-box;
		width: 100%;
		/* border: 1rpx solid mediumvioletred; */
	}
	.card{
		display: flex;
		flex-direction: column;
		justify-content: center;
		border: 1rpx solid royalblue;
		height: 200rpx;
		background-color: #F5F9FF;
		padding: 20rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
	}
	.topCard{
		display: flex;
		justify-content: space-between;
	}
	.tag{
			border-radius: 20rpx;
			background-color: #E2EDFE;
			padding: 2rpx 15rpx;
			box-sizing: border-box;
			font-size: 25rpx;
			color: #2E88FF;
			margin-left: 20rpx;
		}
	.btn{
		margin-right: 40rpx;
		padding:5rpx 10rpx ;
		background-color: gainsboro;
		border-radius: 50%;
	}
	image{
		width: 25rpx;
		height: 25rpx;
	}
	.bottomCard{
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
	}
	.idCard{
		color: #939598;
		font-size: 25rpx;
	}
	.personItem2{
		color: #939598;
		font-size: 25rpx;
	}
	.card2,.card3{
		margin-top: 20rpx;
	}
	.card2Item1,.card3Item1{
		padding: 20rpx 0;
	}
	.card2Item2{
		border: 1px solid rgba(0,0,0,0.2);
		box-shadow:  1px 2px 2px 1px rgba(0, 0, 0, 0.2);
		height: 200rpx;
		border-radius: 10rpx;
	}
	.card3Item2-item{
		border-bottom: 1px solid rgba(0,0,0,0.2);
		padding:20rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.card3Item2-price{
		color: coral;
		font-size: 27rpx;
	}
	.card3Item2-title{
		font-size: 27rpx;
	}
	.card4{
		margin-top: 30rpx;
		border: 1px solid rgba(0,0,0,0.2);
		box-shadow:  1px 2px 2px 1px rgba(0, 0, 0, 0.2);
		padding: 20rpx;
		box-sizing: border-box;
		line-height: 60rpx;
	}
	.card4Desc{
		color: rgba(0,0,0,0.4);
		font-size: 27rpx;
	}
	.content3{
		margin-top: 30rpx;
		padding: 0 !important;
		width: 100%;
		overflow: hidden;
	}
	.btn3{
		float: left;
		width: 50%;
	}
	.btnText{
		color: coral;
	}
	.btn2{
		background-color: #2E88FF;
		color: white;
	}
	.tanSection{
		padding: 0 30rpx;
		box-sizing: border-box;
	}
	.tanTitle{
		padding: 30rpx;
		box-sizing: border-box;
		text-align: center;
	}
	.tanCard{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid rgba(0, 0, 0, 0.2);
		padding: 30rpx;
		box-sizing: border-box;
	}
	.idCard2{
		padding-top: 30rpx;
		box-sizing: border-box;
	}
	.idCard3{
		color: #939598;
		font-size: 30rpx;
	}
</style>
